<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的绑定和解绑</title>
</head>
<body>
    <input type="button" id="btn1" value="启动炸弹">
    <input type="button" id="btn2" value="拆除炸弹">
<div>拆除炸弹后无法再启动炸弹，因为炸弹已经被拆除（即解绑）</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //定时器 定时10秒
    document.write("<font color='red' size='8'><span id=time>10</span></font>秒之后炸弹爆炸");
    let interval = null;
    let num = 10;
    function showTime() {
        num--;
        if (num <= 0) {
           alert("炸弹爆炸了。。。")
        }
        let span = document.getElementById("time");
        span.innerText = num;
    }
    //给btn1按钮绑定单击事件
    $("#btn1").on("click",function () {
         interval = setInterval("showTime()",1000);
    })
    //通过btn2解绑btn1的单击事件
    $("#btn2").on("click",function () {
        $("#btn1").off("click");
        clearInterval(interval);
    })
</script>
</html>